<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${mp.name}">页面授权登录</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, #d7ff5f, #7bfedb);
        }

        .container {
            text-align: center;
            padding: 20px;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
            border-radius: 10px;
            background-color: rgba(255, 255, 255, 0.8);
            width: 300px;
            height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        h1 {
            font-size: 24px;
            margin-bottom: 10px;
            color: #333;
        }

        p {
            font-size: 16px;
            color: #666;
            margin-bottom: 20px;
        }

        .wechat-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 50px;
            border: none;
            border-radius: 5px;
            background-color: #1aad19;
            color: white;
            font-size: 18px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .wechat-button:hover {
            background-color: #148f12;
        }

        .wechat-icon {
            width: 44px;
            height: 44px;
            margin-right: 10px;
        }

        .login-header {
            display: flex;           /* 使用flex布局 */
            align-items: center;     /* 垂直居中 */
            justify-content: center; /* 水平居中 */
            text-align: center;      /* 确保文本在h1标签内居中，尽管在flex布局中可能不需要 */
        }

        .sys-icon {
            margin-left: 10px;       /* 添加一些左边距，使图片和文字之间有一点间隔 */
            height: 40px;            /* 你可以根据需要调整图片的高度 */
            border-radius: 20px;
            width: auto;             /* 保持图片的宽高比 */
        }
        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
            display: none;
            border-radius: 10px;
        }

        .loading-spinner {
            border: 4px solid rgba(255, 255, 255, 0.1);
            border-left-color: #ffffff;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .loading-overlay p {
            color: white;
            font-size: 16px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="content">
        <h1 class="login-header">
            <span th:text="${mp.name}"></span>
            <img th:src="@{${mp.iconUrl}}" src="/img/defaultHeadImg.png" alt="业务系统图标" class="sys-icon">
        </h1>
        <p th:text="${businessPurposes}">页面授权用途</p>
        <button id="authButton" class="wechat-button">
            <img th:src="@{/img/sysIcon/wechat.png}" src="/img/sysIcon/wechat.png" alt="微信图标" class="wechat-icon">
            <span>授权微信</span>
        </button>
        <div id="loadingOverlay" class="loading-overlay">
            <div class="loading-spinner"></div>
            <p>请等待...</p>
        </div>
    </div>
</div>
<input type="hidden" id="authorUrl" th:value="${authorUrl}">
<input type="hidden" id="recallUrl" th:value="${recallUrl}">
<input type="hidden" id="recallParams" th:value="${recallParams}">

<script type="text/javascript">
    //初始化页，通过sessionStorage存储业务系统传来的reCallUrl、recallParam，以便于完成授权后回到业务指定的该位置及当时的参数
    document.addEventListener("DOMContentLoaded", function() {
        sessionStorage.setItem("wx_commonAuthor_recallUrl", document.getElementById("recallUrl").value);
        sessionStorage.setItem("wx_commonAuthor_recallParams", document.getElementById("recallParams").value);
        console.log("recallUrl in sessionStorage:", sessionStorage.getItem("wx_commonAuthor_recallUrl"));
        console.log("recallParams in sessionStorage:", sessionStorage.getItem("wx_commonAuthor_recallParams"));
    });

    document.getElementById('authButton').addEventListener('click', function() {
        // 禁用按钮以防止重复点击
        this.disabled = true;

        // 显示等待效果
        let loadingOverlay = document.getElementById('loadingOverlay');
        loadingOverlay.style.display = 'flex';

        // document.getElementById("authForm").submit();
        window.location.href = document.getElementById("authorUrl").value;
        // 假设这里你已经实现了微信授权登录功能，下面是一个模拟的异步操作
        setTimeout(function() {
            // 隐藏等待效果
            loadingOverlay.style.display = 'none';

            // 重新启用按钮（假设登录成功后需要再次显示）
            document.getElementById('authButton').disabled = false;

            // 你可以在这里添加登录成功后的逻辑，比如跳转到另一个页面
            // window.location.href = 'success.html';
        }, 10000); // 模拟10秒的授权登录过程
    });
</script>
</body>
</html>